<template>
	<view class="content fofa">
		<tabnav :col="back"></tabnav>
		<view style="height: 120rpx;"></view>
		<view v-if="!isCodeValid">
			<view class="textCen foSi40 fowe600">设置签署密码</view>
			<view class="textCen foSi25" style="margin-top: 60rpx;">请设置合同签署密码，用于签署认证</view>
			<view class="wid90 mar code-input-wrap">
				<input class="code-input" v-model="codeNumber" type="number" :adjust-position="false" :auto-blur="true" maxlength="6" @input="handleInputClick" focus/>
				<view class="code-list">
					<block v-for="(item, index) in codeNumber.length" :key="index">
						<view class="code-list-item">*</view>
					</block>
					<block v-for="(item, index) in 6-codeNumber.length" :key="index">
						<view class="code-list-item"></view>
					</block>
				</view>
			</view>
		</view>
		<view v-if="isCodeValid">
			<view class="textCen foSi40 fowe600">设置签署密码</view>
			<view class="textCen foSi25" style="margin-top: 60rpx;">请再次输入以确认</view>
			<view class="wid90 mar code-input-wrap" style="margin-bottom: 50rpx;">
				<input class="code-input" v-model="phoneNumber" type="number" :adjust-position="false" :auto-blur="true" maxlength="6" @input="handleInputClick1" :focus="isCodeValid"/>
				<view class="code-list">
					<block v-for="(item, index) in phoneNumber.length" :key="index">
						<view class="code-list-item">*</view>
					</block>
					<block v-for="(item, index) in 6-phoneNumber.length" :key="index">
						<view class="code-list-item"></view>
					</block>
				</view>
			</view>
			<view class="wid90 mar dis disAl disJuC coFFF foSi35 borRad10 hei87" @click="wancheng()"
				:style="isCodeValidTr?'background-color:#035DFF;':'background-color:#397FFE;'">完成</view>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="type" message="两次输入密码不一致" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import tabnav from "../../common/tabnav/tabnav.vue"
	export default {
		components: {
			tabnav,
		},
		data() {
			return {
				codeNumber: '',
				phoneNumber: '',
				type: 'error',
				isCodeValid: false,
				isCodeValidTr: false,
				back: uni.getStorageSync('back'),
			}
		},
		onLoad() {

		},
		methods: {
			tiaozhuan(url){
				uni.navigateTo({
					url: url
				});
			},
			// 输入密码
			handleInputClick(e) {
				let val = e.detail.value
				this.codeNumber = val
				if (val && val.length == 6) {
					this.isCodeValid = true
				}
			},
			// 输入再次输入
			handleInputClick1(e) {
				this.isCodeValidTr = false
				let val = e.detail.value
				this.phoneNumber = val
				if (val && val.length == 6) {
					if(this.phoneNumber == this.codeNumber){
						this.isCodeValidTr = true
					}else{
						this.$refs.message.open()
						this.isCodeValid = false
						this.phoneNumber = ''
						this.codeNumber = ''
					}
				}
			},
			wancheng(){
				let that = this
				
				if(that.isCodeValidTr){
					// 提交修改
					uni.showLoading({
						title:'加载中...'
					})
					uni.request({
						url: that.global.url+'api/qianyu_dzq/applet_user_up_signpass',
						method: 'POST',
						header:{'site-id':that.global.site_id,'token':uni.getStorageSync('inuse_userinfo_token')},
						data: {
							signpass:that.phoneNumber
						},
						success(res) {
						    let result = res.data
							if(result.code == 1){
								uni.showToast({
									title:result.msg,
									icon:'success'
								})
								setTimeout(()=>{
									uni.navigateBack()
								},1000)
							}else{
								uni.showToast({
									title:result.msg,
									icon:'error'
								})
							}
						},
						complete() {
							uni.hideLoading()
						}
					})
					// uni.navigateBack()
				}
			}
		}
	}
</script>

<style>
	.content {}
	.xia{
		height: 1rpx;
		background: #BFBFBF;
	}
	.code-input-wrap {
	    position: relative;
	    height: 100rpx;
		margin-top: 60rpx;
	}
	.code-input {
	    position: absolute;
	    left: 0;
	    top: 0;
	    height: 100rpx;
	    width: 100%;
	    opacity: 0;
	    z-index: 99;
	    outline: none;
		padding: 50rpx;
		Box-sizing: border-box;
		overflow: hidden;
	}
	.code-list {
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100rpx;
	    display: flex;
	    justify-content: space-between;
	}
	.code-list-item {
	    width: 88rpx;
	    height: 88rpx;
	    background: #CDDFFF;
	    border-radius: 10rpx;
	    font-size: 35rpx;
	    font-weight: 600;
	    line-height: 100rpx;
	    text-align: center;
	    margin-right: 10rpx;
	    z-index: 5;
	    box-sizing: border-box;
	}
	.code-list-item:last-child {
	    margin-right: 0;
	}
</style>
